<template>
  <div class="moveTaskTakeout">
    <van-nav-bar title="移库下架" left-text="返回" @click-left="onClickReturn"></van-nav-bar>
    <van-form :show-error-message="false" class="common-form">
      <van-field
        v-model="moveTakeoutParams.moveCode"
        ref="moveCode"
        id="moveCode"
        label="移库单号"
        placeholder="请扫描移库单号"
        @keyup.enter.native="!pdaScanData.data ? getWaitTakeOutDataByMoveCode() : ''"
        @focus="moveCodeFocusClick"
        @click="moveCodeFocusClick"
        :readonly="moveCodeReadOnly"
      />
      <div class="pick-scan-info" v-if="showChooseContent">
        <van-cell>
          <div slot="title">
            <van-field
              readonly
              clickable
              v-model="chooseParams.chooseFromLocationCode"
              placeholder="选择库位"
              @click="showFromLocationCode = true"
            />
            <van-popup v-model="showFromLocationCode" round position="bottom">
              <van-picker
                show-toolbar
                :columns="fromLocationCodeList"
                value-key="fromLocationCode"
                @cancel="fromLocationCodeCancel"
                @confirm="fromLocationCodeConfirm"
              />
            </van-popup>
          </div>
          {{ chooseParams.chooseSkuDesc }}
        </van-cell>
        <van-cell>
          <div slot="title">
            <van-field readonly clickable v-model="chooseParams.chooseSku" placeholder="选择SKU" @click="showSku = true" />
            <van-popup v-model="showSku" round position="bottom">
              <van-picker ref="skuRef" show-toolbar :columns="skuList" value-key="sku" @cancel="skuCancel" @confirm="skuConfirm" />
            </van-popup>
          </div>
          {{ chooseParams.chooseDifferQty }}
        </van-cell>
      </div>
      <van-field v-model="fromCartonNumber" label="来源箱号" disabled v-if="showChooseContent" />
      <van-field
        v-model="moveTakeoutParams.fromLocationCode"
        ref="fromLocationCode"
        id="fromLocationCode"
        name="来源库位"
        label="来源库位"
        placeholder="请扫描来源库位"
        @keyup.enter.native="!pdaScanData.data ? barCodeFocus() : ''"
        @focus="fromLocationCodeFocusClick"
        @click="fromLocationCodeFocusClick"
        :readonly="fromLocationCodeReadOnly"
      />
      <van-field
        v-model="moveTakeoutParams.barCode"
        ref="barCode"
        id="barCode"
        name="SKU"
        label="SKU"
        placeholder="请扫描SKU"
        @keyup.enter.native="!pdaScanData.data ? doMoveTakeout() : ''"
        @focus="barCodeFocusClick"
        @click="barCodeFocusClick"
        :readonly="barCodeReadOnly"
        clearable
      />
      <van-field label="数量" v-model="moveTakeoutParams.takeoutQty" disabled />
      <van-row type="flex" class="moveTaskTakeout__num">
        <van-col span="4">
          待下架
        </van-col>
        <van-col span="4">
          <span class="red">{{ waitMoveQtySum }}</span>
        </van-col>
        <van-col span="4">
          已下架
        </van-col>
        <van-col span="4">
          <span class="red">{{ takeoutQtySum }}</span>
        </van-col>
        <van-col span="4">
          差异
        </van-col>
        <van-col span="4">
          <span class="red">{{ differQtySum }}</span>
        </van-col>
      </van-row>
    </van-form>
    <!-- 普通消息响应遮罩层 -->
    <van-overlay :show="showMsgOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">{{ showMsg }}</div>
          </van-row>
          <van-row style="margin-top:64px">
            <van-col span="24" style="text-align:center">
              <van-button type="primary" @click="closeOverlay()">关闭</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-overlay>

    <!-- 页面跳转提示遮罩层 -->
    <van-overlay :show="showPageMsgOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">{{ showPageMsg }}</div>
          </van-row>
          <van-row style="margin-top:64px">
            <van-col span="24" style="text-align:center">
              <van-button type="primary" @click="goPutawayPage()">确定</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-overlay>

    <!-- 加载遮罩 -->
    <van-overlay :show="showLoadingOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">加载中......</div>
          </van-row>
        </div>
      </div>
    </van-overlay>

    <!-- 复杂消息响应遮罩层 -->
    <van-overlay :show="showComplexMsgOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">该移库任务已下架完成，请选择上架方式！</div>
          </van-row>
          <van-row style="margin-top:64px">
            <van-col span="12" style="text-align:center">
              <van-button type="primary" @click="goMoveBoxPutaway()">按箱上架</van-button>
            </van-col>
            <van-col span="12" style="text-align:center">
              <van-button type="primary" @click="goMoveItemPutaway()">按件上架</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {getWaitTakeOutDataByMoveCode, doMoveTakeout} from "@/api/biz/moveTask/moveTask.js";

export default {
  name: "moveTaskTakeout",
  computed: {
    ...mapGetters("scanner", ["pdaScanData"]),
    ...mapGetters("user", ["userData"])
  },

  watch: {
    pdaScanData: {
      handler(data) {
        // this.scanEvent(data.data);
        let input = document.activeElement.id;
        if (input == "fromLocationCode") {
          this.moveTakeoutParams.fromLocationCode = data.data;
          this.barCodeFocus();
        } else if (input == "barCode") {
          this.moveTakeoutParams.barCode = data.data;
          this.doMoveTakeout();
        } else {
          this.moveTakeoutParams.moveCode = data.data;
          this.getWaitTakeOutDataByMoveCode();
        }
      },
      deep: true
    },
    $route: {
      handler(route) {
        if (route.name === "moveTaskTakeout") {
          this.moveTakeoutParams.moveCode = this.$route.params.moveCode;
        }
      }
    }
  },

  created() {
    // 获取用户
    this.moveTakeoutParams.user = this.userData.sysUserLoginName;

    this.$route.params.moveCode = "";
    // 默认选中移库单号
    this.$nextTick(() => {
      this.moveCodeFocus();
    });
  },

  data() {
    return {
      // 是否显示选择内容，用以区分指定单和空白单
      showChooseContent: false,

      // 第一次插入数据
      switchNewLocationAndSku: true,

      // 统计数量
      waitMoveQtySum: 0,
      takeoutQtySum: 0,
      differQtySum: 0,

      // 只读标识
      fromLocationCodeReadOnly: false,
      barCodeReadOnly: false,
      moveCodeReadOnly: false,
      // 已选择参数对象choose
      chooseParams: {
        chooseFromLocationCode: "",
        chooseSku: "",
        chooseBarCode: "",
        chooseSkuDesc: "",
        chooseTakeoutQty: "",
        chooseWaitMoveQty: "",
        chooseMoveDetailId: "",
        chooseMoveTakeoutId: "",
        chooseDifferQty: "",

        // 新增统计总数
        chooseTakeoutQtySum: "",
        chooseWaitMoveQtySum: ""
      },

      // 显示来源库位d:'',
      showFromLocationCode: false,
      // 显示SKU
      showSku: false,

      // 移库下架参数
      moveTakeoutParams: {
        moveType: 2, // 移库单类型 2：指定单 3：空白单
        moveDetailId: "",
        moveTakeoutId: "",
        moveCode: "",
        user: "",
        fromLocationCode: "",
        sku: "",
        barCode: "",
        skuDesc: "",
        takeoutQty: 1
      },

      // 待移库下架列表，库位/SKU列表
      list: [],
      fromLocationCodeList: [],
      skuList: [],

      // 记录当前操作的对象
      currentBlurName: "",

      // 消息遮罩层参数
      showMsgOverlay: false,
      showMsg: "",

      // 复杂消息
      showComplexMsgOverlay: false,

      // 加载遮罩
      showLoadingOverlay: false,

      // 页面跳转
      showPageMsgOverlay: false,
      showPageMsg: "",
      showPagePutawayType: "",
      fromCartonNumber: ""
    };
  },

  methods: {
    // 扫描枪扫描
    clickEvent() {
      this.scanData = [];
    },
    scanEvent(data) {
      this.scanData.push(data);
    },
    scanErrorEvent() {},
    cellClickEvent() {},

    // 光标跳转至来源库位
    fromLocationCodeFocus() {
      this.$nextTick(() => {
        this.$refs.fromLocationCode.focus();
      });
    },

    // 来源库位框点击或失焦
    fromLocationCodeFocusClick() {
      this.fromLocationCodeReadOnly = true;
      // 记录当前对象
      this.currentBlurName = "fromLocationCode";
      setTimeout(() => {
        this.fromLocationCodeReadOnly = false;
      }, 200);
    },

    // 光标跳转至移库单号
    moveCodeFocus() {
      this.$nextTick(() => {
        this.$refs.moveCode.focus();
      });
    },

    // 移库单号框点击或失焦
    moveCodeFocusClick() {
      this.moveCodeReadOnly = true;
      // 记录当前对象
      this.currentBlurName = "moveCode";
      setTimeout(() => {
        this.moveCodeReadOnly = false;
      }, 200);
    },

    // 光标跳转至SKU
    barCodeFocus() {
      this.$nextTick(() => {
        this.$refs.barCode.focus();
      });
    },

    // SKU框点击或失焦
    barCodeFocusClick() {
      this.barCodeReadOnly = true;
      // 记录当前对象
      this.currentBlurName = "barCode";
      setTimeout(() => {
        this.barCodeReadOnly = false;
      }, 200);
    },

    // 根据移库单号获取待下架明细数据
    getWaitTakeOutDataByMoveCode() {
      if (this.moveTakeoutParams.moveCode == "") {
        this.moveCodeFocus();
        this.msgShowTime("请输入移库单号");
      }
      // 加载遮罩
      this.showLoadingOverlay = true;
      // 判断参数
      getWaitTakeOutDataByMoveCode(this.moveTakeoutParams).then(response => {
        // 关闭遮罩
        this.showLoadingOverlay = false;
        if (response.data.status) {
          // 根据移库单类型改变页面元素
          let moveType = response.data.data.moveType;
          this.moveTakeoutParams.moveType = moveType;
          if (Number(moveType) == 3) {
            // 获取统计数量
            this.waitMoveQtySum = response.data.data.waitMoveQtySum;
            this.takeoutQtySum = response.data.data.takeoutQtySum;
            this.differQtySum = response.data.data.differQtySum;

            this.fromLocationCodeFocus();
          } else {
            // 指定单，显示来源库位和SKU的选择框
            this.showChooseContent = true;
            // 有待下架数据
            if (response.data.data.list != undefined) {
              this.list = response.data.data.list;
              // 获取来源库位列表
              this.getFromLocationCodeList();

              // 获取统计数量
              this.waitMoveQtySum = response.data.data.waitMoveQtySum;
              this.takeoutQtySum = response.data.data.takeoutQtySum;
              this.differQtySum = response.data.data.differQtySum;

              if (this.switchNewLocationAndSku == false) {
                this.barCodeFocus();
              } else {
                this.fromLocationCodeFocus();
              }
            } else {
              // 完成下架，提示消息
              this.moveCodeFocus();
              this.moveTakeoutParams.moveCode = "";
              this.moveTakeoutParams.fromLocationCode = "";
              this.moveTakeoutParams.barCode = "";

              this.list = [];
              this.fromLocationCodeList = [];
              this.skuList = [];

              this.waitMoveQtySum = 0;
              this.takeoutQtySum = 0;
              this.differQtySum = 0;

              this.chooseParams.chooseFromLocationCode = "";
              this.chooseParams.chooseSku = "";
              this.chooseParams.chooseBarCode = "";
              this.chooseParams.chooseSkuDesc = "";
              this.chooseParams.chooseTakeoutQty = "";
              this.chooseParams.chooseWaitMoveQty = "";
              this.chooseParams.chooseMoveDetailId = "";
              this.chooseParams.chooseMoveTakeoutId = "";
              this.chooseParams.chooseDifferQty = "";

              this.chooseParams.chooseTakeoutQtySum = "";
              this.chooseParams.chooseWaitMoveQtySum = "";

              // 清空来源箱号
              this.fromCartonNumber = "";

              this.msgShowTime(response.data.message);
            }
          }
        } else {
          this.moveCodeFocus();
          this.moveTakeoutParams.moveCode = "";
          this.msgShowTime(response.data.message);
        }
      });
    },

    // 跳转至移库上架页面
    goPutawayPage() {
      let putawayType = this.showPagePutawayType;

      // 跳转至新页面
      setTimeout(() => {
        this.$router.push({
          name: putawayType,
          params: {
            moveCode: this.moveTakeoutParams.moveCode
          }
        });
      }, 500);
    },

    // 跳转至整箱上架页面
    goMoveBoxPutaway() {
      // 跳转至新页面
      setTimeout(() => {
        this.$router.push({
          name: "moveTaskBoxPutaway",
          params: {
            moveCode: this.moveTakeoutParams.moveCode
          }
        });
      }, 500);
    },

    // 跳转至按件上架页面
    goMoveItemPutaway() {
      // 跳转至新页面
      setTimeout(() => {
        this.$router.push({
          name: "moveTaskItemPutaway",
          params: {
            moveCode: this.moveTakeoutParams.moveCode
          }
        });
      }, 500);
    },

    // 遮罩层消息展示设置
    msgShowTime(msg) {
      this.showMsg = msg;
      this.showMsgOverlay = true;
      // setTimeout(() => {
      //     this.showMsgOverlay = false;
      // }, 3000);
    },

    // 关闭遮罩
    closeOverlay() {
      this.showMsgOverlay = false;
      // 将焦点回到原位置
      if (this.currentBlurName == "fromLocationCode") {
        this.fromLocationCodeFocus();
      } else if (this.currentBlurName == "barCode") {
        this.barCodeFocus();
      } else {
        this.moveCodeFocus();
      }
    },

    // 执行移库下架
    doMoveTakeout() {
      // 校验来源库位参数
      if (this.moveTakeoutParams.fromLocationCode == "") {
        this.msgShowTime("请输入来源库位！");
        // 定位到库位
        this.fromLocationCodeFocus();
        return false;
      }
      if (
        (Number(this.moveTakeoutParams.moveType) == 2 || Number(this.moveTakeoutParams.moveType) == 5) &&
        this.moveTakeoutParams.fromLocationCode != this.chooseParams.chooseFromLocationCode
      ) {
        this.msgShowTime("请扫描来源库位（" + this.chooseParams.chooseFromLocationCode + "）或选择其他库位！");
        this.moveTakeoutParams.fromLocationCode = "";
        // 定位到库位
        this.fromLocationCodeFocus();
        return false;
      }
      // 校验SKU参数
      if (this.moveTakeoutParams.barCode == "") {
        this.msgShowTime("请输入SKU！");
        // 定位到库位
        this.barCodeFocus();
        return false;
      }
      if ((Number(this.moveTakeoutParams.moveType) == 2 || Number(this.moveTakeoutParams.moveType) == 5)
            && this.moveTakeoutParams.barCode != this.chooseParams.chooseBarCode) {
        this.msgShowTime("请扫描SKU（" + this.chooseParams.chooseSku + "）或选择其他SKU！");
        this.moveTakeoutParams.barCode = "";
        // 定位到库位
        this.barCodeFocus();
        return false;
      }
      // 加载遮罩
      this.showLoadingOverlay = true;

      // 参数赋值
      this.moveTakeoutParams.moveDetailId = this.chooseParams.chooseMoveDetailId;
      this.moveTakeoutParams.moveTakeoutId = this.chooseParams.chooseMoveTakeoutId;
      doMoveTakeout(this.moveTakeoutParams).then(response => {
        // 先把SKU清了
        this.moveTakeoutParams.barCode = "";
        // 关闭遮罩
          this.showLoadingOverlay = false;
        if (response.data.status) {
          this.$notify({type: "success", message: response.data.message});

          if (Number(this.moveTakeoutParams.moveType) == 3) {
            // 成功后，已下架数量+1
            this.takeoutQtySum = Number(this.takeoutQtySum) + 1;
            this.differQtySum = Number(this.differQtySum) + 1;

            // 清空数据
            this.moveTakeoutParams.barCode = "";
            this.moveTakeoutParams.fromLocationCode = "";

            // 光标聚焦于库位
            this.fromLocationCodeFocus();
          } else {
            // 指定单更新，首先判断当前库位与当前SKU是否执行成功
            // 可以继续执行，清空SKU
            if (Number(this.chooseParams.chooseTakeoutQtySum) + 1 < Number(this.chooseParams.chooseWaitMoveQtySum)) {
              this.barCodeFocus();
              this.switchNewLocationAndSku = false;
            } else {
              // 更新数据，清空库位
              // 清空数据
              this.moveTakeoutParams.fromLocationCode = "";
              this.fromLocationCodeFocus();
              this.switchNewLocationAndSku = true;
            }

            // 重新获取下架数据
            this.getWaitTakeOutDataByMoveCode();
            this.moveTakeoutParams.barCode = "";
          }
        } else {
          this.msgShowTime(response.data.message);
        }
      })
      .catch(() => {
        // 关闭遮罩
        this.showLoadingOverlay = false;
        this.$toast.fail("请求出错！");
      });
    },

    //  返回
    onClickReturn() {
      this.$router.push({
        name: "moveTaskMenu"
      });
    },

    //  来源库位下拉取消
    fromLocationCodeCancel() {
      this.showFromLocationCode = false;
    },

    //  来源库位下拉确定
    fromLocationCodeConfirm(value) {
      this.chooseParams.chooseFromLocationCode = value;
      this.showFromLocationCode = false;
      this.getSkuListByFromLocationCode();
    },

    //  SKU下拉取消
    skuCancel() {
      this.showSku = false;
    },

    //  来源库位下拉确定
    skuConfirm(value) {
      // 改变choose的值
      this.chooseParams.chooseSku = value;

      let fromLocationCode = this.chooseParams.chooseFromLocationCode;
      let sku = this.chooseParams.chooseSku;

      let that = this;
      // 通过SKU和库位从列表中获取数据
      for (let i = 0; i < that.list.length; i++) {
        if (that.list[i].fromLocationCode == fromLocationCode && that.list[i].sku == sku) {
          let item = that.list[i];
          // 赋值
          that.chooseParams.chooseSkuDesc = item.skuDesc;

          //that.chooseParams.chooseDifferQty = item.takeoutQty + " / " + item.waitMoveQty;
          that.chooseParams.chooseTakeoutQtySum = that.getDifferQtyByLocationCodeAndSku(item.fromLocationCode, item.sku, "TAKEOUT");
          that.chooseParams.chooseWaitMoveQtySum = that.getDifferQtyByLocationCodeAndSku(item.fromLocationCode, item.sku, "WAITMOVE");

          that.chooseParams.chooseDifferQty = that.chooseParams.chooseTakeoutQtySum + " / " + that.chooseParams.chooseWaitMoveQtySum;

          that.chooseParams.chooseMoveDetailId = item.moveDetailId;
          that.chooseParams.chooseMoveTakeoutId = item.moveTakeoutId;
          that.chooseParams.chooseTakeoutQty = item.takeoutQty;
          that.chooseParams.chooseWaitMoveQty = item.waitMoveQty;
          that.chooseParams.chooseSku = item.sku;
          that.chooseParams.chooseBarCode = item.barCode;

          // 赋值来源箱号
          that.fromCartonNumber = item.fromCartonNumber;

          break;
        }
      }

      this.showSku = false;
    },

    // 获取来源库位列表
    getFromLocationCodeList() {
      let that = this;
      // 清空原库位列表
      that.fromLocationCodeList = [];
      // that.chooseParams.chooseFromLocationCode = "";

      that.list.forEach(function(item) {
        if (that.fromLocationCodeList.indexOf(item.fromLocationCode) == -1) {
          that.fromLocationCodeList.push(item.fromLocationCode);
        }
      });

      // 是否切换为新的来源库位
      if (this.switchNewLocationAndSku == true) {
        this.chooseParams.chooseFromLocationCode = that.fromLocationCodeList[0];
      }

      // 初始化SKU
      this.getSkuListByFromLocationCode();
    },

    // 通过来源库位筛选SKU列表
    getSkuListByFromLocationCode() {
      let that = this;
      // 清空原库位列表
      that.skuList = [];
      // that.chooseParams.chooseSku = "";

      let fromLocationCode = that.chooseParams.chooseFromLocationCode;
      that.list.forEach(function(item) {
        if (fromLocationCode == item.fromLocationCode && that.skuList.indexOf(item.sku) == -1) {
          that.skuList.push(item.sku);
        }
      });

      // 是否切换为新的来源SKU
      if (that.switchNewLocationAndSku == true) {
        that.chooseParams.chooseSku = that.skuList[0];
      }

      // 通过来源库位和SKU，确定其他属性值
      for (let i = 0; i < that.list.length; i++) {
        if (that.list[i].fromLocationCode == fromLocationCode && that.list[i].sku == that.chooseParams.chooseSku) {
          let item = that.list[i];
          // 赋值
          that.chooseParams.chooseSkuDesc = item.skuDesc;
          // that.chooseParams.chooseDifferQty = item.takeoutQty + " / " + item.waitMoveQty;
          that.chooseParams.chooseTakeoutQtySum = that.getDifferQtyByLocationCodeAndSku(item.fromLocationCode, item.sku, "TAKEOUT");
          that.chooseParams.chooseWaitMoveQtySum = that.getDifferQtyByLocationCodeAndSku(item.fromLocationCode, item.sku, "WAITMOVE");

          that.chooseParams.chooseDifferQty = that.chooseParams.chooseTakeoutQtySum + " / " + that.chooseParams.chooseWaitMoveQtySum;

          that.chooseParams.chooseMoveDetailId = item.moveDetailId;
          that.chooseParams.chooseMoveTakeoutId = item.moveTakeoutId;
          that.chooseParams.chooseTakeoutQty = item.takeoutQty;
          that.chooseParams.chooseWaitMoveQty = item.waitMoveQty;
          that.chooseParams.chooseSku = item.sku;
          that.chooseParams.chooseBarCode = item.barCode;

          // 赋值来源箱号
          that.fromCartonNumber = item.fromCartonNumber;
          break;
        }
      }
    },

    // 通过库位和SKU获取对应商品的统计数量
    getDifferQtyByLocationCodeAndSku(fromLocationCode, sku, type) {
      let waitMoveQtySum = 0;
      let takeoutQtySum = 0;

      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].fromLocationCode == fromLocationCode && this.list[i].sku == sku) {
          let item = this.list[i];
          waitMoveQtySum += item.waitMoveQty;
          takeoutQtySum += item.takeoutQty;
        }
      }

      if (type == "TAKEOUT") {
        return takeoutQtySum;
      } else if (type == "WAITMOVE") {
        return waitMoveQtySum;
      } else {
        return 0;
      }
    }
  }
};
</script>

<style scoped lang="less">
.moveTaskTakeout {
  /deep/ .pickScanHeader-notice.van-notice-bar {
    padding: 4px 16px;
    line-height: 20px;
  }
  .good-count {
    font-size: 14px;
    padding: 10px 16px;
    display: flex;
    .checkbox {
      font-size: 14px;
      margin-left: 40px;
    }
  }
  .pick-scan-info {
    border-bottom: 1px dotted #ebedf0;
    /deep/ .van-cell {
      padding: 4px 16px;
      &::after {
        border-bottom: 0;
      }
    }
    /deep/ .van-cell__value {
      color: #333;
    }
    /deep/ .van-field {
      padding: 0;
      .van-field__control {
        text-align: left;
      }
      &::after {
        border-bottom: 0;
      }
    }
  }
  .pick-scan-list {
    /deep/ .van-col {
      font-size: 14px;
      padding: 8px 4px;
      span {
        word-break: break-all;
        word-break: break-word;
      }
    }
    .text-center {
      text-align: center;
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .msgTxt {
    margin: 8px 83px 0;
    font-size: 18px;
    color: white;
  }

  .van-cell-style {
    .van-cell__value {
      width: 40%;
      text-align: center;
      color: red;
    }
    padding-right: 0px;
    padding-left: 0px;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .msgTxt {
    margin: 8px 83px 0;
    font-size: 18px;
    color: white;
  }
  &__num {
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    span {
      margin-left: 8px;
      margin-right: 4px;
      padding-top: 2px;
    }
    .red {
      color: red;
    }
  }
}
</style>
